<template>
    <div id="bbb">
         <el-row :gutter="20">
             <el-col :span="6"><div class="grid-content bg-purple">
                 <el-card class="box-card" style="height: 120px">
                     <div>
                         <img src="../../assets/tu01.png" style="vertical-align: middle;width: 66px">
                         上传视频总数{{diyi.count}}
                     </div>
                 </el-card>
             </div></el-col>
             <el-col :span="6" ><div class="grid-content bg-purple-light">
                 <el-card class="box-card" style="height: 120px">
                     <div>
                         <img src="../../assets/tu01.png" style="vertical-align: middle;width: 66px">
                         上传视频浏览量{{diyi.looknum}}
                     </div>
                 </el-card>
             </div></el-col>
             <el-col :span="6" ><div class="grid-content bg-purple">
                 <el-card class="box-card" style="height: 120px">
                     <div>
                         <img src="../../assets/tu2.png" style="vertical-align: middle;width: 77px">
                         收藏量{{diyi.collectnum}}
                     </div>
                 </el-card>
             </div></el-col>
             <el-col :span="6" ><div class="grid-content bg-purple-light">
                 <el-card class="box-card" style="height: 120px">
                     <div>
                         <img src="../../assets/tu2.png" style="vertical-align: middle;width: 77px">
                         点赞量{{diyi.likenum}}
                     </div>
                 </el-card>
             </div></el-col>
         </el-row>

        <el-card class="box1">
            <div slot="header" class="clearfix">
                <span style="float: left; padding: 15px 0;">待处理事务</span>
            </div>
            <div class="text item">
                <el-row>
                    <el-col :span="6"><div class="grid-content bg-purple-light">
                        您有商品待审核，请尽快处理
                        (<span style="color: red">{{disan.shangping}}</span>)
                    </div></el-col>
                    <el-col :span="6" :push="5"><div class="grid-content bg-purple-light">
                        您有视频待审核，请尽快处理
                        (<span style="color: red">{{disan.shiping}}</span>)
                    </div></el-col>
                </el-row>
            </div>
        </el-card>

        <el-card class="box1">
            <div slot="header" class="clearfix">
                <span style="float: left; padding: 3px 0;">运营快捷入口</span>
            </div>
            <div class="text item">
                <el-row>
                    <el-col :span="3" :push="1" ><div class="grid-content bg-purple-light">
                        <router-link to="/tjsp">
                            <div class="msg left" >
                                <i class="el-icon-plus" style="font-size: 30px"></i>
                                <div>添加商品</div>
                            </div>
                        </router-link>
                    </div></el-col>
                    <el-col :span="3" :push="1"><div class="grid-content bg-purple-light">
                        <router-link to="/tjkc">
                            <div class="msg left" >
                                <i class="el-icon-plus" style="font-size: 30px"></i>
                                <div>添加课程</div>
                            </div>
                        </router-link>
                    </div></el-col>
                    <el-col :span="3" :push="1"><div class="grid-content bg-purple-light">
                        <router-link to="/ddlb">
                            <div class="msg left">
                                <i class="el-icon-s-order" style="font-size: 30px"></i>
                                <div>订单列表</div>
                            </div>
                        </router-link>
                    </div></el-col>
                    <el-col :span="3" :push="1"><div class="grid-content bg-purple-light">
                        <router-link to="/rsbm">
                            <div class="msg left" >
                                <i class="el-icon-s-custom" style="font-size: 30px"></i>
                                <div>人事部门</div>
                            </div>
                        </router-link>
                    </div></el-col>
                    <el-col :span="3" :push="1"><div class="grid-content bg-purple-light">
                        <router-link to="/wqgl">
                            <div class="msg left" >
                                <i class="el-icon-orange" style="font-size: 30px"></i>
                                <div>微圈管理</div>
                            </div>
                        </router-link>
                    </div></el-col>
                    <el-col :span="3" :push="1"><div class="grid-content bg-purple-light">
                        <router-link to="/spshgl">
                            <div class="msg left" >
                                <i class="el-icon-user-solid" style="font-size: 30px"></i>
                                <div>商品审核管理</div>
                            </div>
                        </router-link>
                    </div></el-col>
                    <el-col :span="3" :push="1"><div class="grid-content bg-purple-light">
                        <router-link to="/kcshgl">
                            <div class="msg left" >
                                <i class="el-icon-user" style="font-size: 30px"></i>
                                <div>课程审核管理</div>
                            </div>
                        </router-link>
                    </div></el-col>
                </el-row>
            </div>
        </el-card>

        <el-row :gutter="20">
            <el-col :span="12"><div class="grid-content bg-purple">
                <el-card class="box1">
                    <div slot="header" class="clearfix">
                        <span style="float: left; padding: 15px 0;">课程总览</span>
                    </div>
                    <div class="text item" style="height: 100px">
                        <el-row>
                            <el-col :span="6"><div class="grid-content bg-purple-light"  style="text-align: center">
                                <h1>{{dier.kcount}}</h1>
                                <span>课程数量（已上架)</span>
                            </div></el-col>
                            <el-col :span="6" :push="5"><div class="grid-content bg-purple-light" style="text-align: center">
                                <h1>{{dier.scount}}</h1>
                                <span>商品数量（已上架）</span>
                            </div></el-col>
                        </el-row>
                    </div>
                </el-card>
            </div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple">
                <el-card class="box1">
                    <div slot="header" class="clearfix">
                        <span style="float: left; padding: 15px 0;">用户总览</span>
                    </div>
                    <div class="text item" style="height: 100px">
                        <el-row :gutter="20">
                            <el-col :span="6"><div class="grid-content bg-purple-light" style="text-align: center">
                                <h1>{{dier.jinri}}</h1>
                                <span>今日新增</span>
                            </div></el-col>
                            <el-col :span="6"><div class="grid-content bg-purple-light" style="text-align: center">
                                <h1>{{dier.zuori}}</h1>
                                <span>昨日新增</span>
                            </div></el-col>
                            <el-col :span="6"><div class="grid-content bg-purple-light" style="text-align: center">
                                <h1>{{dier.benyue}}</h1>
                                <span>本月新增</span>
                            </div></el-col>
                            <el-col :span="6"><div class="grid-content bg-purple-light" style="text-align: center">
                                <h1>{{dier.quanbu}}</h1>
                                <span>全部用户</span>
                            </div></el-col>
                        </el-row>
                    </div>
                </el-card>
            </div></el-col>
        </el-row>
        <el-card class="box-card" style="height: 500px">
            <div class="block" style="text-align: right">
                <el-date-picker
                        v-model="value2"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="~~"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                        @change="kecheng">
                </el-date-picker>
            </div>
            <div slot="header" class="clearfix">
                <span style="float: left; padding: 15px 0;">课程统计</span>
            </div>
            <div class="text item">
                <el-row :gutter="20">
                    <el-col :span="3"><div class="grid-content bg-purple">
                        <div>
                            本月新增课程总数
                            <h1>{{tongji.benyue}}</h1>
                            <span style="color: #1ABC9C" v-if="tongji.bool">↑&nbsp;<span>{{tongji.shang}}</span></span>
                            <span style="color:red" v-else>↓&nbsp;<span>{{tongji.shang}}</span></span>
                            &nbsp;&nbsp;<span style="">同比上月</span>
                        </div>

                        <div style="margin-top: 100px">
                            本周申请成功
                            <h1>{{tongji.benzhou}}</h1>
                            <span style="color: #1ABC9C" v-if="tongji.boolzhou">↑&nbsp;<span>{{tongji.qushi}}</span></span>
                            <span style="color:red" v-else>↓&nbsp;<span>{{tongji.qushi}}</span></span>
                            &nbsp;&nbsp;<span style="">同比上周</span>
                        </div>
                    </div></el-col>
                    <el-col :span="21"><div class="grid-content bg-purple">
                        <div id="main" style="width: 100%;height: 350px;background:#fff"></div>
                    </div></el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        name: "Shouye",
        data(){
            return{
                diyi:{
                    count:0,
                    looknum:0,
                    collectnum:0,
                    likenum:0,
                },
                dier:{
                    //课程总览
                    scount:0,
                    kcount:0,
                    //用户总览
                    jinri:0,
                    zuori:0,
                    benyue:0,
                    quanbu:0
                },
                disan:{
                  shipin:0,
                  shangping:0,
                },
                charts: '',
                pickerOptions: {
                    shortcuts: [{
                        text: '本周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '本月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value2: [],
                tongji:{
                    benyue:0,
                    shang:"",
                    bool:true,

                    benzhou:0,
                    qushi:"",
                    boolzhou:true
                }
            }
        },
        methods:{
            // 设置默认的开始与结束时间
            getDefaultTime() {
                const end = new Date();// 结束时间
                const start = new Date();// 开始时间
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                end.setTime(end.getTime() - 3600 * 1000 * 24);
                this.value2[0] = this.formDate(start); // 开始时间
                this.value2[1] = this.formDate(end); // 结束时间
            },
            // 格式化时间
            formDate(date) {
                var myYear = date.getFullYear();
                var myMonth = date.getMonth() + 1;
                var myWeekday = date.getDate();
                if (myMonth < 10) {
                    myMonth = '0' + myMonth;
                }
                if (myWeekday < 10) {
                    myWeekday = '0' + myWeekday;
                }
                return myYear + '-' + myMonth + '-' + myWeekday;
            },
            //本月新增总课程
            async kezong(){
                const res1 = await this.$http.post("/xitongshouye/kechengzong") .then((res)=>{
                    console.log(res.data)
                    var d1 = res.data[0];
                    this.tongji.benyue=d1;
                    var d2 = res.data[1];
                    var d3 = res.data[2];
                    this.tongji.benzhou=d3;
                    var d4 = res.data[3];

                    if(d1>d2){
                       var shang = d1/(d1-d2)*100;
                        this.tongji.shang=shang+"%";
                        //上升
                    }else if(d1<d2){
                        var xia = d2/(d2-d1)*100;
                        this.tongji.bool=false;//箭头方向
                        this.tongji.shang=xia
                        //下降
                    }else{
                        this.tongji.shang="0%";
                    }

                    if(d3>d4){
                        var s = d3/(d3-d4)*100;
                        this.tongji.qushi=s+"%";
                        //上升
                    }else if(d3<d4){
                        var x = d4/(d4-d3)*100;
                        this.tongji.boolzhou=false;//箭头方向
                        this.tongji.qushi=x+"%"
                        //下降
                    }else{
                        this.tongji.qushi="0%";
                    }
                })
            },
            async as(){
                //第一排
                const res = await this.$http.post("/xitongshouye/all").then((res)=>{
                    this.diyi.count=res.data.count;
                    this.diyi.looknum=res.data.looknum;
                    this.diyi.collectnum=res.data.collectnum;
                    this.diyi.likenum=res.data.likenum;
                })
                //待处理事务
                const shiwu = await this.$http.post("/xitongshouye/shenhe") .then((res)=>{
                        this.disan.shangping = res.data[1]
                        this.disan.shiping = res.data[0]
                })
                //课程数量
                const res1 = await this.$http.post("/xitongshouye/kcount") .then((res)=>{
                    this.dier.kcount=res.data
                })
                //商品数量
                const rese = await this.$http.post("/xitongshouye/scount") .then((res)=>{
                    this.dier.scount=res.data
                })
                //用户总览
                const sw = await this.$http.post("/xitongshouye/userall") .then((res)=>{
                    this.dier.jinri=res.data[0]
                    this.dier.zuori=res.data[1]
                    this.dier.benyue=res.data[2]
                    this.dier.quanbu=res.data[3]
                })
            },
            async kecheng(){
                //课程数量
                var params = new URLSearchParams();
                params.append('kaishi', this.value2[0]);
                params.append('jieshu', this.value2[1]);
                const Call = await this.$http.post("/xitongshouye/call",params) .then((res)=>{
                    this.shuju=res.data[0];
                    //调用折线图方法
                    this.drawLine('main',res.data[0],res.data[1])
                })
            },
            //折线图
            drawLine(id,s1,s2) {//s1x坐标的名称，s2数据
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    title:{
                        left:'3%',
                        top:'5%',
                        text:"课程数量",//标题文本，支持使用 \n 换行。
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        align:'right',//文字在前图标在后
                        left:'3%',
                        top:'15%',
                        data: ['近一周']
                    },
                    grid: {
                        top:'30%',
                        left: '5%',
                        right: '5%',
                        bottom: '5%',
                        containLabel: true
                    },

                    toolbox: {
                        feature: {
                            saveAsImage: {} //保存为图片
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap:true,
                        axisTick:{
                            alignWithLabel:true //保证刻度线和标签对齐
                        },
                        data: s1//x坐标的名称
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: true,
                        splitNumber:4, //纵坐标数
                        interval:250 //强制设置坐标轴分割间隔
                    },

                    series: [{
                        name: '当天数量',
                        type: 'line', //折线图line;柱形图bar;饼图pie
                        stack: '总量',
                        areaStyle: {
                            //显示区域颜色---渐变效果
                            color:{
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgb(255,200,213)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#ffffff' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        itemStyle: {
                            color: 'rgb(23,45,255)', //改变折线点的颜色
                            lineStyle: {
                                color: 'rgb(28,34,255)' //改变折线颜色
                            }

                        },
                        data: s2
                    }]
                })
            }
        },
        mounted() {

        },
        created(){
            this.getDefaultTime();
            this.kezong();
            this.as();
            this.kecheng();
        }
    }
</script>

<style scoped>
    .router-link-active {
        text-decoration: none;
        color: #9c00ff;
    }
    a{
        text-decoration: none;
        color: #1b0528;
    }

    .el-card__header{
        background-color: #a6773d;
    }

    #bbb{
        width:1300px;
        height:auto;
    }
    .left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
.box-card{
    margin: 30px 0px 20px 0px;
    text-align: center;
}
.box1{
    margin: 0px 0px 30px 0px;
}
.clearfix:before,
.clearfix:after{
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}
    .el-card ::v-deep .el-card__header {
        padding: 2px 10px;
        height: 55px;
        background-color: #F3F3F3;
    }
</style>